// 多选题对话框

<template>
    <div>
        <el-dialog
        :visible.sync="dialog_visible_1"
        :questionList="dataList"
        @open="openDialog"
        @close="close"
        width="50%"
        >
        <div slot="title" class="header-title" 
        style="line-height:24px;font-size:18px;color:#71589D;"
        >
            <span v-show="title" class="title-name">{{ title }}</span>
        </div>
        <!-- {{form}} -->
            <el-form
            ref="formRef_1"
            :model="form"
            label-width="120px" 
            style="padding-right:40px"
            >
                <el-form-item
                label="题目" 
                prop="title"
                :rules="[{
                required: true, message: '请输入问题', trigger: 'blur'
                },{
                min: 2, max:40, message: '问题长度在2-40之间', trigger: 'blur'
                }]"
                >
                    <el-input
                    v-model="form.title"
                    ></el-input>
                </el-form-item>

                <el-form-item
                    v-for="(option, index) in form.options"
                    :label="'选项' + index"
                    :key="option.index"
                    :prop="form.options[index]"
                    :rules="[{
                    required: true, message: '选项不能为空', trigger: 'blur'
                    },{min: 1, max:30, message: '选项长度在1-30之间', trigger: 'blur'
                    }]"
                >
                    <el-input style="width:80%;float:left" v-model="form.options[index]"></el-input>
                    <el-button 
                    type="danger" 
                    style="width:13%;float:right" 
                    @click.prevent="removeOption(index)"
                    >删除
                    </el-button>
                </el-form-item>

                <el-form-item>
                    <el-button 
                    style="width:80%;float:left;border:2px dashed #DCDFE6" 
                    @click="addOption">+添加选项
                    </el-button>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="dialogCheck">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {

    data() {
        return{
            dialog_visible_1:false,
            form:{
                options:[''],
                title:''
            },
            dataList:[]
        }
    },

    props: {
        title:{
            type: String,
            default: '对话框标题'
        },
        visible: { //开关
            type: Boolean,
            default: false
        },
        questionList:{
            type: Array,
            default(){
                return []
            }
        }
    },

    watch: {
        visible: {
            handler(newValue, oldValue){
                console.log("visible："+newValue)
                this.dialog_visible_1 = newValue
            }
        }
    },

    methods: {
        //添加选项
        addOption: function() {
            this.form.options.push('');
        },
        //删除选项
        removeOption: function(index) {
            if (index !== -1) {
                this.form.options.splice(index, 1)
            }
        },
        
        openDialog: function(){
            console.log(this.questionList)
            console.log(this.title)
            
        },

        close: function(){ //子把false传父
            this.dialog_visible_1 = false
            this.$emit("update:visible", false) //直接改父组件的值
            // this.$emit('close',false) //需要逻辑处理时
        },

        //确定创建
        dialogCheck: function() {
            console.log("hhuiui")
            //校验格式
            this.$refs.formRef_1.validate(valid => {
                if(!valid){
                    return
                }
                else {
                    //form转换为questionList元素的格式
                    let temp = {type:'', title:'', options:[], no:''}
                    temp.title += this.form.title
                    
                    this.form.options.forEach(element => {
                        temp.options.push(element)
                    })
                    console.log("新增多选题："+temp.title)
                    console.log("选项："+temp.options)
                    //清空 
                    let blank= {
                        options: [''],
                        title: ''
                    }
                    this.form = blank
                    this.$emit('addQuestion',temp)
                    this.close()
                }
            })
        },
          

    }
    
}
</script>

<style>
</style>